<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会基本信息设置
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">裁判员信息</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="box-top">
                <el-button type="warning" @click="adddialogVisible = true">新增</el-button>
            </div>
            <el-table :data="untabData" border stripe>
                <el-table-column prop="chno" label="场号" width="60" align="center">
                </el-table-column>
                <el-table-column label="项目裁判" align="center">
                    <el-table-column prop="chiefnamem" label="男子">
                    </el-table-column>
                    <el-table-column prop="chieforderm" label="级别">
                    </el-table-column>
                    <el-table-column prop="chiefnamef" label="女子">
                    </el-table-column>
                    <el-table-column prop="chieforderf" label="级别">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="项目发令" align="center">
                    <el-table-column prop="starternamem" label="男子">
                    </el-table-column>
                    <el-table-column prop="starterorderm" label="级别">
                    </el-table-column>
                    <el-table-column prop="starternamef" label="女子">
                    </el-table-column>
                    <el-table-column prop="starterorderf" label="级别">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="技术代表" align="center">
                    <el-table-column prop="techname" label="姓名">
                    </el-table-column>
                    <el-table-column prop="techorder" label="级别">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="undelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加页面 -->
            <el-dialog title="添加" v-model="adddialogVisible" draggable width="50%" :before-close="addleClose">
                <el-form :model="unaddfrom" label-width="120" :rules="rules" ref="addForm">
                    <el-form-item prop="chno" label="场号：">
                        <el-input v-model.number="unaddfrom.chno"></el-input>
                    </el-form-item>
                    <div class="add-title">执行总裁判</div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="chiefnamem" label="男子项目：">
                                <el-input v-model="unaddfrom.chiefnamem"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="等级：">
                                <el-input v-model="unaddfrom.chieforderm"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="chiefnamef" label="女子项目：">
                                <el-input v-model="unaddfrom.chiefnamef"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="等级：">
                                <el-input v-model="unaddfrom.chieforderf"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="add-title">发令员</div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="starternamem" label="男子项目：">
                                <el-input v-model="unaddfrom.starternamem"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="等级：">
                                <el-input v-model="unaddfrom.starterorderm"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="starternamef" label="女子项目：">
                                <el-input v-model="unaddfrom.starternamef"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="等级：">
                                <el-input v-model="unaddfrom.starterorderf"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="add-title">技术代表</div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="techname" label="技术代表：">
                                <el-input v-model="unaddfrom.techname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="等级：">
                                <el-input v-model="unaddfrom.techorder"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addleClose">取 消</el-button>
                    <el-button type="primary" @click="addUn">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 修改页面 -->
            <el-dialog title="修改" v-model="editdialogVisible" draggable width="50%" :before-close="handleClose">
                <el-form :model="uneditfrom" label-width="120">
                    <el-form-item label="场号：">
                        <el-input v-model="uneditfrom.chno"></el-input>
                    </el-form-item>
                </el-form>
                <div class="add-title">执行总裁判</div>
                <el-row>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="男子项目：">
                                <el-input v-model="uneditfrom.chiefnamem"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="等级：">
                                <el-input v-model="uneditfrom.chieforderm"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="女子项目：">
                                <el-input v-model="uneditfrom.chiefnamef"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="等级：">
                                <el-input v-model="uneditfrom.chieforderf"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="add-title">发令员</div>
                <el-row>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="男子项目：">
                                <el-input v-model="uneditfrom.starternamem"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="等级：">
                                <el-input v-model="uneditfrom.starterorderm"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="女子项目：">
                                <el-input v-model="uneditfrom.starternamef"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="等级：">
                                <el-input v-model="uneditfrom.starterorderf"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="add-title">技术代表</div>
                <el-row>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="技术代表：">
                                <el-input v-model="uneditfrom.techname"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form :model="uneditfrom" label-width="120">
                            <el-form-item label="等级：">
                                <el-input v-model="uneditfrom.techorder"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editUninfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            adddialogVisible: false,
            untabData: [],
            unaddfrom: {
                chno: null,
                chiefnamem: '',
                chieforderm: '',
                chiefnamef: '',
                chieforderf: '',
                starternamem: '',
                starterorderm: '',
                starternamef: '',
                starterorderf: '',
                techname: '',
                techorder: '',
            },
            initialForm: {},
            editdialogVisible: false,
            uneditfrom: {},
            rules: {
                chno: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                chiefnamem: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                chiefnamef: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                starternamem: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                starternamef: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                techname: [
                    { required: true, message: '', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.initialForm = { ...this.addfrom }
        this.getUnpireinfoList();
    },
    methods: {
        // 查询
        async getUnpireinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/ref/getmsg');
                if (result.data.code == 0) {
                    this.untabData = result.data.data
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 删除单条数据
        undelete(e) {
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/ref/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUnpireinfoList()
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        // 新增数据
        async addUn() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    const result = await this.$http.post(this.BACKEND_URL + '/ref/insertmsg', this.unaddfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.getUnpireinfoList();
                        this.$message.success('添加成功')
                        this.unaddfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.unaddfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('请填写必要信息');
                }
            });
        },
        addleClose() {
            this.adddialogVisible = false
            this.unaddfrom = { ...this.initialForm }
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.uneditfrom = info
        },
        async editUninfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/ref/updatemsg', this.uneditfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.getUnpireinfoList();
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.getUnpireinfoList();
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.getUnpireinfoList()
        },
        handleClose(done) {
            this.getUnpireinfoList()
            done()
        },
    }
}
</script>

<style lang="less" scoped>
.box-card {
    margin-top: 15px;

    .box-top {
        float: left;
        margin-bottom: 15px;
    }
}

.add-title {
    margin-bottom: 15px;
    color: red;
    font-size: 15px;
}
</style>